<template>
    <div>
        <mt-header class="plain" fixed>
            <mt-button slot="left" @click="goBack" icon="back">返回</mt-button>
            <mt-button slot="right" @click="goBack">取消</mt-button>
        </mt-header>

        <div class="info-block-list text-left">
            <div class="info-block" v-if="$route.query.type">

                <mt-loadmore ref="loadMore" :auto-fill="false" :top-method="refresh" :bottom-method="loadMore" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded">
                    <div class="info-list">
                        <div class="info-item" v-for="item in data.items" :key="item.infoid">
                            <span class="clamp-text" @click="showInfoDetail(item)">{{item.title}}</span>
                            <!-- <span class="time color-gray ml-2">{{item.createtime}}</span> -->
                        </div>
                    </div>
                    <!-- <div slot="bottom" class="mint-loadmore-bottom">
                        数据加载中 ...
                    </div> -->
                </mt-loadmore>
            </div>

            <div class="info-block" v-else>
                <mt-loadmore ref="loadMore2" :auto-fill="false" :top-method="refresh2" :bottom-method="loadMore2" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded">
                    <div class="info-list">
                        <div class="info-item" v-for="item in data.items" :key="item.infoid" v-if="item.infoid != null">
                            <span class="clamp-text">{{item.schoolname}}-{{item.coursename}}</span>
                            <!-- <span class="time color-gray ml-2">{{item.begintime}}</span> -->
                        </div>
                    </div>
                </mt-loadmore>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import infoApi from '@/api/info'

export default {
    data () {
        return {
            allLoaded: false,
            typeMap: {
                news: 'NEWS',
                publicity: 'PUBLICITY'
            },

            data: {
                items: []
            },

            pageNo: 0,
            pageSize: 5,
        }
    },


    mounted () {
        // this.getHighlighList();
        // this.list('NEWS');
        // this.list('PUBLICITY');
        // this.list('EXTRAREADING');
        // this.listCourse();
        if (this.$route.query.type) {
            this.refresh()
        } else {
            this.refresh2()
        }
    },

    methods: {

        refresh () {
            this.data.items = [];
            this.allLoaded = false;
            this.pageNo = 0;
            this.pageSize = 30;
            this.loadMore(true);
            this.$refs.loadMore.onTopLoaded();
            this.pageSize = 5;

        },

        refresh2 () {
            this.data.items = [];
            this.allLoaded = false;
            this.pageNo = 0;
            this.pageSize = 30;
            this.loadMore2(true);
            this.$refs.loadMore2.onTopLoaded();
            this.pageSize = 5;

        },

        loadMore (onlyOnce) {

            infoApi.getInfoList({
                params: {
                    infotype: this.typeMap[this.$route.query.type],
                    pageno: this.pageNo++,
                    pagesize: this.pageSize
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT] || [];

                if (!result || !result[0]) {
                    this.allLoaded = true;
                } else {
                    this.data.items.push(...result)
                }
                if (!onlyOnce) {
                    this.$refs.loadMore.onBottomLoaded();
                }

            }).catch((resp) => {
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        loadMore2 () {
            infoApi.getCourseInfoList({
                params: {
                    pageno: this.pageNo++,
                    pagesize: this.pageSize
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT] || [];

                if (!result || !result[0]) {
                    this.allLoaded = true;
                } else {
                    this.data.items.push(...result)
                }

                if (!onlyOnce) {
                    this.$refs.loadMore2.onBottomLoaded();
                }
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE] || '获取失败');
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        showInfoDetail (item) {
            let type = this.$route.query.type;
            this.$router.push({ path: '/information/detail', query: { id: item.infoid || '', from: 'information-more?type=' + (type || '') } });
        },

        goBack () {
            this.$router.replace({ path: '/information' });
        },

        handleBottomChange (status) {
            // console.log(status)
        }
    }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$scale: 1.2;

.info-block-list {
  padding-top: 55px;
  margin-left: $offset-x;
  margin-right: $offset-x;
  .info-block {
    border-bottom: 1px solid #d2d2d2;
    .info-block-type {
      font-size: 18px * $scale;
    }

    .info-list {
      padding-bottom: 20px;
      .info-item {
        font-size: 14px * $scale;
        line-height: 19px;
        margin-top: 12px;

        .time {
          font-size: 11px * $scale;
        }

        .clamp-text {
          overflow: hidden;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .info-block:last-child {
    border-bottom: none;
  }
}
</style>
